<template>
    <canvas id="myCanvas" width="1700" height="820" ref="cvs"></canvas>
</template>

<script lang="ts" setup>
import { AlignType, Events, LinkMark, LinkStyle } from "@/Constants";
import Img from "@/features/basic-shape/Img";
import Rect from "@/features/basic-shape/Rect";
import Text from "@/features/basic-shape/Text";
import Link from "@/features/basic-shape/link/Link";
import Feature from "@/features/Feature";
import Group from "@/features/function-shape/Group";
import { onMounted, Ref, ref } from "vue";
import { FontFamily } from "../Constants";
import GridSystem from "../GridSystem";
import { Utils } from "../utils"
import ACtrlPnt from "@/features/function-shape/ctrl-pnts/ACtrlPnt";
import Arrow from "@/features/function-shape/ctrl-pnts/Arrow";

const cvs = ref(null);
let gls = ref<GridSystem | null>(null);

onMounted(() => {
    reset();
})

function getTextTag(gridSys: GridSystem, str = '前端开发', x = 0, y = 0, width = 10, height = 10, fontSize = 10, color = "#D1D0FA", borderColor = "#8F8DFB") {
    const text = new Text(str, 0, 0)
    text.fontSize = fontSize;
    text.cbTransform = false;
    text.cbDrag = false;
    text.strokeStyle = "transparent"

    const rect1 = new Rect(x, y, width, height);
    rect1.radius = 3;
    rect1.fillStyle = color
    rect1.strokeStyle = borderColor

    rect1.cbTransformChild = false;
    rect1.cbTransform = false;
    rect1.addChild(text, true)
    rect1.toHorizonalAlign()
    rect1.toVerticalAlign()
    rect1.on(Events.RESIZE, () => {
        rect1.toHorizonalAlign()
        rect1.toVerticalAlign()
    })
    text.on(Events.RESIZE, () => {
        rect1.toHorizonalAlign()
        rect1.toVerticalAlign()
    })
    gridSys.addFeature(rect1);
    return rect1;
}

function reset(clear = false) {
    if (clear) localStorage.setItem("features", '');
    if (gls.value) {
        gls.value.destroy();
        gls.value = null;
    }
    let canvasDom = cvs.value as unknown as HTMLCanvasElement;
    const gridSys = new GridSystem(canvasDom);
    gridSys.loadFont(FontFamily.SHISHANG).then(res => {
        gridSys.initEventListener();
        gridSys.draw(true)
        gls.value = gridSys;
        setSize(canvasDom);

        const rect1 = getTextTag(gridSys, "canvas", -15, 100, 60, 16, 15, '#BAFC94', '#88E353')
        const rect2 = getTextTag(gridSys, "GridSystem主画布(canvas plus)", 150, 0, 160, 10, 8, '#DFFF89', "#BBEA40")
        rect2.radius = 0;

        const rect3 = getTextTag(gridSys, "features(元素的基类)", 150, 40, 110, 10, 8)
        const link2 = new Link(rect1, rect3)
        link2.pointArr = link2.getGeneratePointArr(LinkStyle.CURVE3_HORIZINAL)
        link2.cbTransform = true;
        gls.value.addFeature(link2);

        const actrlp1 = new ACtrlPnt(rect2, () => {
            let right = Feature.getRectEdges(rect2.pointArr)[3];
            let center = Utils.getMidOfTwoPnts(right[0], right[1])
            return center;
        }, 10)
        actrlp1.isPixelLen = true;

        const actrlp2 = new ACtrlPnt(rect3, () => {
            let right = Feature.getRectEdges(rect3.pointArr)[3];
            let center = Utils.getMidOfTwoPnts(right[0], right[1])
            return center;
        }, 10)
        actrlp1.isPixelLen = true;

        const link18 = new Link(actrlp1, actrlp2);
        link18.pointArr = link18.getGeneratePointArr(LinkStyle.CURVE2_VERTIVAL)
        gls.value.addFeature(link18);
        link18.cbTransform = true;
        link18.zIndex = 10;
        link18.setPntOfBezier(0, { x: link18.bezierPnts[0].x - 100, y: link18.bezierPnts[0].y })
        link18.label = {
            content: '+添加到',
            fontSize: 1.4,
            color: "#18433A",
            offset: { x: 0, y: 1.6 },
            fontFamily: FontFamily.HEITI,
            bolder: false,
            fill: "#C9F3E9",
            autoRotate: true,
        }
        const arrow = new Arrow(link18, .8, 1)
        arrow.zIndex = 11;
        arrow.strokeStyle = "#A9CB53"
        arrow.fillStyle = "#DAFA8B"
        arrow.linkMark = LinkMark.START

        const link = new Link(rect1, rect2)
        link.pointArr = link.getGeneratePointArr(LinkStyle.CURVE3_HORIZINAL, AlignType.HORIZONAL);
        link.setPntOfBezier(0, { x: 200, y: 200 })
        link.cbTransform = true;
        link.lineDashArr = [.5, .5]
        link.setFlowLineDash(true);
        gls.value.addFeature(link);


        const rect4 = getTextTag(gridSys, "Stack(撤销删除记录类)", 150, 80, 110, 10, 8)
        const link3 = new Link(rect1, rect4)
        link3.pointArr = link3.getGeneratePointArr(LinkStyle.CURVE3_HORIZINAL)
        link3.cbTransform = true;
        gls.value.addFeature(link3);


        const rect5 = getTextTag(gridSys, "MiniMap(小地图导航)", 150, 120, 110, 10, 8)
        rect5.children[0].isStroke = false;
        rect5.fillStyle = rect5.strokeStyle = "transparent"
        rect5.borderStyle.color = "#E4601D"
        rect5.border = AlignType.BOTTOM
        const link4 = new Link(rect1, rect5)
        link4.pointArr = link4.getGeneratePointArr(LinkStyle.AUTOEDGE_CURVE)
        link4.cbTransform = true;
        gls.value.addFeature(link4);

        const img2 = new Img("/4dad6ba9-9487-4e38-b2c1-1a56506567e9.jfif", 350, 160, 140);
        gls.value.addFeature(img2)
        const link20 = new Link(rect5, img2)
        link20.pointArr = link20.getGeneratePointArr(LinkStyle.AUTOEDGE_CURVE)
        link20.zIndex = 100
        const arrow2 = new Arrow(link20, 1, 1.2);
        arrow2.zIndex = 12;
        arrow2.fillStyle = "#FAA479"
        arrow2.strokeStyle = "#D6855C"
        arrow2.linkMark = LinkMark.END
        gls.value.addFeature(link20);


        const rect6 = getTextTag(gridSys, "ScaleRule(比例尺)", 150, 160, 110, 10, 8)
        const link5 = new Link(rect1, rect6)
        link5.pointArr = link5.getGeneratePointArr(LinkStyle.CURVE3_HORIZINAL)
        link5.cbTransform = true;
        gls.value.addFeature(link5);

        const rect7 = getTextTag(gridSys, "Shortcuts(快捷键封装)", 150, 200, 110, 10, 8)
        const link6 = new Link(rect1, rect7)
        link6.pointArr = link6.getGeneratePointArr(LinkStyle.CURVE3_HORIZINAL)
        link6.cbTransform = true;
        gls.value.addFeature(link6);

        const rect8 = getTextTag(gridSys, "GridLine(网格背景)", 150, 240, 110, 10, 8)
        const link7 = new Link(rect1, rect8)
        link7.lineWidth = .4
        link7.pointArr = link7.getGeneratePointArr(LinkStyle.CURVE3_HORIZINAL, AlignType.HORIZONAL, 1.5, 250)
        link7.cbTransform = true;
        link7.isFlowSegment = true;
        gls.value.addFeature(link7);

        const rect9 = getTextTag(gridSys, "Interface(接口,类型约束), Constants(常量,枚举)", 150, 280, 190, 10, 8)
        const link8 = new Link(rect1, rect9)
        link8.pointArr = link8.getGeneratePointArr(LinkStyle.CURVE3_HORIZINAL)
        link8.cbTransform = true;
        gls.value.addFeature(link8);

        const rect10 = getTextTag(gridSys, "utils(工具方法,数学方法集合)", 150, -40, 190, 10, 8)
        const link9 = new Link(rect1, rect10)
        link9.pointArr = link9.getGeneratePointArr(LinkStyle.CURVE3_HORIZINAL)
        link9.cbTransform = true;
        gls.value.addFeature(link9);

        // const rect3 = getTextTag(gridSys, "features(元素的基类)", 150, 40, 110, 10, 8)

        const rect11 = getTextTag(gridSys, "basic-shape(基础元素)", rect3.position.x + 180, rect3.position.y + 30, 110, 10, 8, '#AEFDF1', '#5DD7C4')
        const link10 = new Link(rect3, rect11)
        link10.pointArr = link10.getGeneratePointArr(LinkStyle.BROKEN2, AlignType.VERTICAL)
        link10.cbTransform = true;
        gls.value.addFeature(link10);

        const rect12 = getTextTag(gridSys, "function-shape(功能性元素)", rect3.position.x + 180, rect3.position.y - 30, 110, 10, 8, '#AEFDF1', '#5DD7C4')
        const link11 = new Link(rect3, rect12)
        link11.pointArr = link11.getGeneratePointArr(LinkStyle.AUTOEDGE_BROKEN2, AlignType.HORIZONAL)
        gls.value.addFeature(link11);

        const text2 = new Text(`Rect, Img, Video, Text
Circle, Line, Pen, Link
(矩形,图片,文本,线段,连接线等..)`, rect11.position.x + 180, rect11.position.y)
        text2.cbTransform = false;
        text2.fontSize = 7
        text2.cbDrag = false;
        gridSys.addFeature(text2);

        const img3 = new Img("/img.png", rect11.position.x + 220, rect11.position.y + 42, 40);
        img3.radius = 2;
        gridSys.addFeature(img3);

        const img4 = new Img("/vite.svg", rect11.position.x + 150, rect11.position.y + 42, 40);
        gridSys.addFeature(img4);

        const rect22 = new Group(text2, img3, img4);
        rect22.cbResize = true;
        gridSys.addFeature(rect22);

        const link12 = new Link(rect11, rect22)
        link12.pointArr = link12.getGeneratePointArr(LinkStyle.AUTOEDGE_CURVE)
        link12.cbTransform = true;
        gls.value.addFeature(link12);

        const link19 = new Link(img3, { x: 700, y: 112 })
        link19.pointArr = link19.getGeneratePointArr(LinkStyle.AUTOEDGE_STRAIGHT);
        link19.label = {
            content: '我是一个图片',
            fontSize: 1.4,
            color: "#18433A",
            offset: { x: 0, y: 1.6 },
            fontFamily: FontFamily.HEITI,
            bolder: false,
            fill: "#C9F3E9",
            autoRotate: true,
        }
        gls.value.addFeature(link19);


        const rect15 = getTextTag(gridSys, `Bbox(包围盒形变)`, rect12.position.x + 180, rect12.position.y - 35, 90, 10, 8)
        const link14 = new Link(rect12, rect15)
        link14.pointArr = link14.getGeneratePointArr(LinkStyle.CURVE3_HORIZINAL)
        link14.cbTransform = true;
        gls.value.addFeature(link14);

        const rect16 = getTextTag(gridSys, `Cursor(文本编辑の光标)`, rect12.position.x + 180, rect12.position.y - 60, 90, 10, 8)
        const link15 = new Link(rect12, rect16)
        link15.pointArr = link15.getGeneratePointArr(LinkStyle.CURVE3_HORIZINAL)
        link15.cbTransform = true;
        gls.value.addFeature(link15);

        const rect17 = getTextTag(gridSys, `Group, SelectArea(合并为组, 区域选择多选)`, rect12.position.x + 180, rect12.position.y - 85, 180, 10, 8)
        const link16 = new Link(rect12, rect17)
        link16.pointArr = link16.getGeneratePointArr(LinkStyle.CURVE3_HORIZINAL)
        link16.cbTransform = true;
        gls.value.addFeature(link16);

        const rect18 = getTextTag(gridSys, `Pnt(点状元素的基类)`, rect12.position.x + 180, rect12.position.y, 100, 10, 8, '#E3C1FB', '#A763D7')
        const link17 = new Link(rect12, rect18)
        link17.pointArr = link17.getGeneratePointArr(LinkStyle.CURVE3_HORIZINAL)
        link17.cbTransform = true;
        gls.value.addFeature(link17);

        const rect14 = getTextTag(gridSys, `Pnt, ACtrlPnt, Arrow, BCtrlPnt,
CtrlPnt, RCtrlPnt, AdsorbPnt
(控制点,箭头,吸附点等..)`, rect12.position.x + 380, rect12.position.y - 40, 130, 30, 8)
        const link13 = new Link(rect18, rect14)
        link13.pointArr = link13.getGeneratePointArr(LinkStyle.AUTOEDGE_BROKEN_DIAGONAL)
        link13.cbTransform = true;
        gls.value.addFeature(link13);
    })
}


function setSize(canvasDom: HTMLCanvasElement) {
    canvasDom.width = document.documentElement.clientWidth - 4;
    canvasDom.height = document.documentElement.clientHeight - 4;

    window.onresize = () => {
        canvasDom.width = document.documentElement.clientWidth - 4;
        canvasDom.height = document.documentElement.clientHeight - 4;
    }
}
</script>